<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>发布房间信息</title>
</head>


<style>

    #container {

        /*margin-top: 2%;
        */

        /*高度缓慢过度*/
        height: 30px;
        transition: height 1s;
        -moz-transition: height 1s; /* Firefox 4 */
        -webkit-transition: height 1s; /* Safari 和 Chrome */
        -o-transition: height 1s; /* Opera */

        background-color: white;

        border-bottom: 2px solid rgba(0, 0, 0, .12);

        /*padding-left: 20px;
        padding-right: 20px;

        */
        outline: none;

        /*border-radius: 5px;
        -moz-border-radius: 5px;
*/
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;

        -webkit-rtl-ordering: logical;
        cursor: text;
        box-sizing: border-box;
        text-align: center;
        /*  border-radius: 5px;
          -moz-border-radius: 25px;
  */
        /*width: 98%;*/
        /* background-color: #fff;
         margin-left: 1%;
 */
    }

    /*滑动组件*/
    #scrollpage {
        overflow: hidden;
    }

    #scrollpage ul {
        /*padding-bottom: 15px;*/
        background-color: white;
    }

    #scrollpage ul li {
        /*padding-bottom: 15px;*/
        border-top: 1px solid rgba(0, 0, 0, .12);
        border-bottom: 1px solid rgba(0, 0, 0, .12);
        padding-left: 13px;
    }

    #pickerInput {
        height: 30px;
        opacity: 1;
        border: 0px;
        outline: none;

        font-family: inherit;
        font-size: inherit;
        line-height: inherit;

        padding-left: 20px;
        -webkit-rtl-ordering: logical;
        cursor: text;
        box-sizing: border-box;
        border-radius: 40px;
        -moz-border-radius: 40px;
        width: 98%;
        margin-left: 1%;
        margin-top: 10px;
        background: #ddeeffbd;
        color: rgba(0, 0, 100, 0.6);
    }

    .amap-ui-poi-picker-sugg-container {
        border: 1px solid #ccc;
        background: #fff;
        width: 90%;
        margin-left: 1%;
        overflow: hidden;
        border-radius: 5px;
        z-index: 10000;
    }

    .input-holder {
        position: absolute;
        top: 2px;
        width: auto;
        left: 60px;
        right: 10px;
    }

    .condition {
        text-align: center;
        padding: 0;
        top: 0;
    }

    .condition {
        width: 100%;

        /*  border-radius: 5px;
        */
        border: 0;
        color: rgba(0, 0, 100, 0.6);
        background-color: rgba(253, 253, 253, 0.88);
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .u-svg-srch svg {
        width: 20px;
        height: 20px;
    }

    .u-svg-srch {
        position: absolute;
        top: 16px;
        right: 13px;
        /*background-image: url();
*/
    }

</style>


<script>
    loadcss('css/zufang.css');
</script>

<body>


<div class="input-holder">
    <input type="text" class="search-input" id="pickerInput" placeholder="搜索"/>
    <i class="u-svg-srch">

        <svg t="1547057712184" class="icon" style="" viewBox="0 0 1024 1024" version="1.1"
             xmlns="http://www.w3.org/2000/svg" p-id="2892" xmlns:xlink="http://www.w3.org/1999/xlink" width="200"
             height="200">
            <defs>
                <style type="text/css"></style>
            </defs>
            <path d="M866.6 959.6c-12.4 0-24.7-5.4-33-15.9l-197-247.2c-14.5-18.2-11.5-44.7 6.7-59.2 118.4-94.4 137.9-267.5 43.6-385.9-94.4-118.4-267.5-138-385.9-43.6-118.4 94.4-138 267.5-43.6 385.9C318.6 670.5 416.8 709 514.2 694c23-3.6 44.5 12.3 48 35.3 3.5 23-12.3 44.5-35.3 48C400 797 271.4 746.6 191.5 646.2c-59.7-75-86.7-168.7-75.9-263.9 10.7-95.2 58-180.6 132.9-240.3 154.7-123.2 381-97.8 504.3 57 114.3 143.5 100.5 348.7-25.6 476l172.3 216.2c14.5 18.2 11.5 44.7-6.7 59.2-7.7 6.2-17 9.2-26.2 9.2z"
                  fill="#009FE8" p-id="2893"></path>
        </svg>
    </i>
</div>

<div id="container">
</div>


<!--列表-->
<div style="position: relative">


    <div id="scrollpage">

        <ul id="nearby_rooms_scroller">

        </ul>

    </div>
</div>


<script>

    //页面总高度
    var winHeight = $(window).height();

    var c = $("#container");


</script>


<!--页面初始化-->
<script type="text/javascript">


    let fsC;

    function filterAndSort(ls) {

        //如果无筛选条件则直接返回原列表
        if (!fsC || fsC.price_unit === -1) {

            for (let i in ls) {

                let r = ls[i];
                r.SHOW_PRICE = ls[i].prices[0];

                //如果有日租优先使用日租条件
                for (let i in r.prices) {
                    if (r.prices[i].unit === 5) {
                        r.SHOW_PRICE = r.prices[i];
                        break;//结束循环
                    }
                }

            }

            return ls;

        } else {

            let rLs = [];

            for (let i in ls) {

                let r = ls[i];

                r.SHOW_PRICE = null;

                for (let j in r.prices) {

                    if (r.prices[j].timeUnit === fsC.price_unit && r.prices[j].price >= fsC.price_from && r.prices[j].price <= fsC.price_to) {

                        if (!r.SHOW_PRICE) {
                            r.SHOW_PRICE = r.prices[j];
                        }
                        if (r.prices[j].price < r.SHOW_PRICE.price) {
                            r.SHOW_PRICE = r.prices[j];
                        }
                    }

                }

                if (r.SHOW_PRICE) {
                    rLs.push(r);
                }
            }

            rLs.sort(function (a, b) {
                if (fsC.price_sort === '升') {
                    return a.SHOW_PRICE.price - b.SHOW_PRICE.price;
                }
                else return b.SHOW_PRICE.price - a.SHOW_PRICE.price;
            });

            return rLs;
        }

    }


    let map;

    //定序加载

    loadmultiplejs([
        '//webapi.amap.com/maps?v=1.4.11&key=eda44d70a2da926c4c4c1ff69320339a'
        , 'https://cdn.staticfile.org/iScroll/5.2.0/iscroll.min.js'
        , '/js/touchslider.js'
    ], function () {


        //输入框
        let input = $("#pickerInput");
        input.click(function () {
            input.val('');
        });


        //确定滑动窗口以及地图的高度
        let sp = $('#scrollpage');
        let h = (winHeight - 50) * (0.382);
        c.height(h);
        sp.height(winHeight - 50 - h);

        //监听键盘收起事件
        $(window).resize(function () {
            let thisHeight = $(this).height();
            if (winHeight - thisHeight <= 50) {
                input.blur();
            }
        });

        //在这里对判断滚动也的尺寸.如果尺寸太小则弹窗提醒
        if (sp.height() < 50) {
            alert("请在竖屏模式下使用该服务");
        }

        //初始化滑动组件
        let is = new IScroll('#scrollpage', {
            scrollbars: false,
            mouseWheel: false,
            interactiveScrollbars: false,
            shrinkScrollbars: 'scale',
            fadeScrollbars: false,
            scrollY: true,
            probeType: 1,
            bindToWrapper: true,
            click: false,
            tap: true
        });
        is.refresh();

        //解决手机端无法滑动问题.
        document.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, {
            capture: true,
            passive: false
        });


        let nearby_rooms_scroller = $('#nearby_rooms_scroller');

        //添加一个房源1
        function nearby_rooms_append(room, id) {


            let imgU = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1547535753&di=42991891aebf435b869f7566c5d35b5c&src=http://hbimg.b0.upaiyun.com/bdaca9a07e1a8947c00c2f826ebf848750927aa24963-cATwbg_fw658';

            if (room.images && room.images[0]) {
                imgU = "/resource/preview/4/" + room.images[0] + ".jpg";
            }


            //向房源列表中追加元素
            nearby_rooms_scroller.append('' +
                '            <li id=roomId_' + room.id + '>' +
                '' +
                '                <div class="content__item clicked">' +
                '      <span class="content__item--pic">' +
                '        <img alt=' + room.location.address + ' class="content__item__aside lazyloaded"' +
                '             src=' + imgU + '>' +
                '              </span>' +
                '                    <div class="content__item__main">' +
                '                        <p class="content__item__title">' +
                '                            ' + room.name + '(' + id + ')' + '</p>' +
                '                        <p class="content__item__content">' + room.location.address + room.location.detailedDescription +
                '                        </p>' +
                '                        <p class="content__item__bottom">' +
                '                            ' + room.SHOW_PRICE.text +
                '                            <span class="content__item__bottom--activity"></span>' +
                '                        </p>' +
                '' +
                '                    </div>' +
                '                </div>' +
                '' +
                '' +
                '            </li>');


            $('#roomId_' + room.id).on('tap', function () {

                Backs.push(function () {
                    dynamicPage.display('/tenant/details.html?id=' + room.id);

                }, function () {

                    if (dynamicPage.isShow) {
                        dynamicPage.close();
                    } else {
                        return true;
                    }

                });//非跳过事件

            });


            is.refresh();
        }


        loadmultiplejs(
            [
                /*这两个依赖于上一个*/
                '//webapi.amap.com/ui/1.0/main.js?v=1.0.11',
                '//webapi.amap.com/maps?v=1.4.11&key=eda44d70a2da926c4c4c1ff69320339a&plugin=AMap.ToolBar',
            ], function () {

                //地图组件
                map = new AMap.Map('container', {
                    zoom: 5,
                    resizeEnable: true
                });

                map.on('complete', function () {
                    $('.amap-logo').remove();
                    $('.amap-copyright').remove();
                });

                //定位组件
                map.plugin('AMap.Geolocation', function () {
                    geolocation = new AMap.Geolocation({
                        enableHighAccuracy: true,//是否使用高精度定位，默认:true
                        timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                        convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                        showButton: true,        //显示定位按钮，默认：true
                        buttonPosition: 'RB',    //定位按钮停靠位置
                        buttonOffset: new AMap.Pixel(5, 5),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                        zoomToAccuracy: true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                    });
                    map.addControl(geolocation);

                    geolocation.getCurrentPosition(function () {
                    });

                    AMap.event.addListener(geolocation, 'error', function () {
                        input.val('定位失败');
                    });
                });


                //输入提示
                AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {

                    let poiPicker = new PoiPicker({
                        input: 'pickerInput'
                    });


                    window.poiPicker = poiPicker;
                    var marker = new AMap.Marker();

                    /*                    var infoWindow = new AMap.InfoWindow({
                                            offset: new AMap.Pixel(0, -20)
                                        });
                                        */

                    poiPicker.on('poiPicked', function (poiResult) {
                        var source = poiResult.source,
                            poi = poiResult.item,
                            info = {
                                source: source,
                                id: poi.id,
                                name: poi.name,
                                location: poi.location.toString(),
                                address: poi.address
                            };
                        marker.setMap(map);
                        //infoWindow.setMap(map);
                        marker.setPosition(poi.location);
                        //infoWindow.setPosition(poi.location);
                        let loc = poi.name;
                        if (poi.address !== "") {
                            loc += "(" + poi.address + ")";
                        }
                        /*infoWindow.setContent('<pre>' + loc + '</pre>');
                        infoWindow.open(map, marker.getPosition());
                       */
                        input.val(poi.name);
                        input.blur();

                        map.setCenter(marker.getPosition());
                    });

                    /* poiPicker.onCityReady(function () {
                         poiPicker.suggest();
                     });*/
                });

                //拖拽选址
                AMapUI.loadUI(['misc/PositionPicker'], function (PositionPicker) {
                    let positionPicker = new PositionPicker({
                        mode: 'dragMap',
                        map: map,
                        iconStyle: {//自定义外观
                            url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png',//图片地址
                            size: [0, 0],  //要显示的点大小，将缩放图片
                            ancher: [0, 0],//锚点的位置，即被size缩放之后，图片的什么位置作为选中的位置
                        }
                    });
                    positionPicker.on('success', function (positionResult) {

                        if (!tmpMarker) {
                            nearby();
                            let address = '';
                            if (positionResult.regeocode.aois.length > 0) {
                                address = positionResult.regeocode.aois[0].name;
                            }
                            /*else {
                                address = positionResult.regeocode.addressComponent.township;
                            }
    */
                            input.val(address);
                            input.blur();
                        }
                    });
                    positionPicker.on('fail', function (positionResult) {
                        input.val('');
                        input.blur();
                    });
                    positionPicker.start();
                    map.panBy(0, 1);
                });


                let markers = [];

                //清理标记的点
                function clearMarker() {
                    for (let i in markers) {
                        markers[i].setMap(null);
                    }
                }

                //重新恢复点
                function showMarker() {
                    for (let i in markers) {
                        markers[i].setMap(map);
                    }
                }


                //点标记
                function mark(room, i) {

                    let pos = [room.location.longitude, room.location.latitude];
                    marker = new AMap.Marker({
                        map: map,
                        icon: new AMap.Icon({
                            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-' + i + '.png',
                            size: new AMap.Size(27, 35),  //图标大小
                            imageSize: new AMap.Size(27, 35)
                        }),
                        position: pos
                    });
                    markers.push(marker);
                }


                let tmpMarker;

                let markerCenter;

                //查看某个指定的点
                function view_point(lon, lat) {//两个参数是经纬度

                    //首先隐藏所有的点
                    clearMarker();

                    //标记一个点,中心点为五角星
                    let pos = [lon, lat];

                    tmpMarker = new AMap.Marker({
                        map: map,
                        icon: new AMap.Icon({
                            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png',
                            size: new AMap.Size(27, 35),  //图标大小
                            imageSize: new AMap.Size(27, 35)
                        }),
                        position: pos
                    });


                    //保存当前中心点
                    markerCenter = [map.getCenter().lng, map.getCenter().lat];

                    //切换中心点
                    map.setCenter(pos);

                    //切换左上角的按钮
                    mainBtSwatch('back_bt');

                    //隐藏搜索框
                    $('.input-holder').hide();

                    //地图视野最大化,效果缓慢过度
                    c.height(winHeight - 50);

                }

                //关闭查看某个定点的回调
                function close_view_point() {

                    //删除中心标记点
                    tmpMarker.setMap(null);

                    //清除临时点坐标
                    tmpMarker = null;

                    //恢复中心点
                    map.setCenter(markerCenter);

                    //将隐藏的的点显示出来
                    showMarker();

                    //切换回原按钮
                    mainBtSwatch('navigation_bt');

                    //显示搜索框
                    $('.input-holder').show();

                    //地图视野恢复原状
                    c.height((winHeight - 50) * (0.382));
                }

                Event.on('compensation_view_point', function () {
                    close_view_point();
                });

                //监听view_point事件
                Event.on('view_point', function (data) {
                    view_point(data['lon'], data['lat']);
                });


                let nearby_rooms_scroller_ul = $('#nearby_rooms_scroller');

                //清理列表中的元素
                function clearUl() {
                    nearby_rooms_scroller_ul.empty();
                    nearby_rooms_scroller_ul.append('<li>\n' +
                        '                <div class="condition" id="open_condition_bt">\n' +
                        '                    自定义筛选以及排序规则\n' +
                        '                </div>\n' +
                        '            </li>\n');


                    $('#open_condition_bt').on('tap', function () {

                        Backs.push(function () {
                            mydialog.display('html/dialog/condition.html');
                        }, function () {


                            if (mydialog.isShow) {
                                mydialog.close();
                            }
                            else {
                                return true;    //事件已经失效
                            }

                        }, true);//跳过事件

                    });


                }


                let currentList;

                //获取附近的房源
                function nearby() {

                    //发起post请求获取边界内的点,并将结果按照距离进行排序.

                    //边界的跨度不应该太大.如果边界跨度太大则进行限定

                    //边界

                    //最东侧
                    let elng = map.getBounds().northeast.lng;

                    //最北侧
                    let nlat = map.getBounds().northeast.lat;

                    //最西侧
                    let wlng = map.getBounds().southwest.lng;

                    //最南侧
                    let slat = map.getBounds().southwest.lat;

                    //控制经纬度跨度
                    if (elng - wlng > 0.1) {
                        elng = map.getCenter().lng + 0.05;
                        wlng = map.getCenter().lng - 0.05;
                    }

                    if (nlat - slat > 0.1) {
                        nlat = map.getCenter().lat + 0.05;
                        slat = map.getCenter().lat - 0.05;
                    }


                    //清理点标记
                    clearMarker();

                    //清空ul列表
                    clearUl();

                    //发起post请求,获取附近的房源

                    $.get('/room/nearby', {elng: elng, wlng: wlng, nlat: nlat, slat: slat}, function (data) {

                        currentList = data;

                        //首先将结果进行筛选
                        let ls = filterAndSort(data);

                        for (let i = 0; i < ls.length; i++) {

                            //点标记
                            mark(ls[i], i + 1);

                            //向列表中追加
                            nearby_rooms_append(ls[i], i + 1);

                        }

                    });

                }


                //注册事件监听
                Event.on('condition_panel_ok', function (data) {

                    //接收条件
                    fsC = data;

                    //首先清空列表中中的元素
                    //清理点标记
                    clearMarker();

                    //清空ul列表
                    clearUl();

                    //将当前展示的列表中心筛选排序并展示
                    let ls = filterAndSort(currentList);

                    for (let i = 0; i < ls.length; i++) {

                        //点标记
                        mark(ls[i], i + 1);

                        //向列表中追加
                        nearby_rooms_append(ls[i], i + 1);

                    }

                });


            });

    });

</script>


</body>
</html>